<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1050284" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">单选-未选中</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">单选-选中</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">多选-未选中</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">多选-选中</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">清空</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">提示</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">更改</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">复制-蓝</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">复制-灰</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">导航_返回箭头@1x</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">icon_组织</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">多选</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">选择－</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">icon_标签</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">icon_时钟</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">icon_默认图</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">icon_箭头</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">icon_发送范围</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">icon_头像</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">icon_箭头2</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">风险提示</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">拨打</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">跟踪记录</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">未拨打</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">已填跟踪</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">风险提示</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">跟踪记录</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">已填跟踪</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">拨打</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">未拨打</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">默认头像</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">img默认图</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">指向箭头_1</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">发送范围</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">活动标签</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">部门组织</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">指向箭头_1</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">circle</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">活跃</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">男</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">联系电话</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">女</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">合-置灰</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">扫一扫</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">排名</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">全休眠</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">上拉默认</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">上拉选中</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">活跃提示</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">全休眠提示</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">热门</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">收起</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">下拉默认</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">下拉选中</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">无效客户</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">展开</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">星级-点亮</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">无效客户提示</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">注-置灰</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">眼睛</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">实-置灰</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">星级-置灰</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">高关注</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">高活跃提示</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">风-置灰</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">半休眠提示</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">半休眠</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">weixin</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">置顶</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">上拉</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">小眼睛</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">桃心</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">对号</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">心</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe790;</span>
                <div class="name">转发</div>
                <div class="code-name">&amp;#xe790;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">右箭头实心小</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">眼睛</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">资源 38</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">资源 42</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">资源 41</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">资源 40</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">资源 37</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">资源 39</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">资源 36</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">资源 21</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">资源 29</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">资源 30</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">资源 28</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">资源 31</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">资源 1</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">资源 2</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">资源 20</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">资源 17</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">资源 19</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">资源 18</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">资源 13</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">资源 15</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">资源 16</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">资源 12</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">跳转</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">备注</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">默认</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">logo</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">返回顶部</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">陪访</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">活动</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">公司</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">地址</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">电弧</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">17星级</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-danxuan-weixuanzhong"></span>
            <div class="name">
              单选-未选中
            </div>
            <div class="code-name">.icon-danxuan-weixuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danxuan-xuanzhong"></span>
            <div class="name">
              单选-选中
            </div>
            <div class="code-name">.icon-danxuan-xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoxuan-weixuanzhong"></span>
            <div class="name">
              多选-未选中
            </div>
            <div class="code-name">.icon-duoxuan-weixuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoxuan-xuanzhong"></span>
            <div class="name">
              多选-选中
            </div>
            <div class="code-name">.icon-duoxuan-xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qingkong"></span>
            <div class="name">
              清空
            </div>
            <div class="code-name">.icon-qingkong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tishi"></span>
            <div class="name">
              提示
            </div>
            <div class="code-name">.icon-tishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-genggai"></span>
            <div class="name">
              更改
            </div>
            <div class="code-name">.icon-genggai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuzhi-lan"></span>
            <div class="name">
              复制-蓝
            </div>
            <div class="code-name">.icon-fuzhi-lan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuzhi-hui"></span>
            <div class="name">
              复制-灰
            </div>
            <div class="code-name">.icon-fuzhi-hui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daohang_fanhuijiantou1x"></span>
            <div class="name">
              导航_返回箭头@1x
            </div>
            <div class="code-name">.icon-daohang_fanhuijiantou1x
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_zuzhi1"></span>
            <div class="name">
              icon_组织
            </div>
            <div class="code-name">.icon-icon_zuzhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duoxuan"></span>
            <div class="name">
              多选
            </div>
            <div class="code-name">.icon-duoxuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanze"></span>
            <div class="name">
              选择－
            </div>
            <div class="code-name">.icon-xuanze
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_biaoqian"></span>
            <div class="name">
              icon_标签
            </div>
            <div class="code-name">.icon-icon_biaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_shizhong"></span>
            <div class="name">
              icon_时钟
            </div>
            <div class="code-name">.icon-icon_shizhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_morentu"></span>
            <div class="name">
              icon_默认图
            </div>
            <div class="code-name">.icon-icon_morentu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_jiantou"></span>
            <div class="name">
              icon_箭头
            </div>
            <div class="code-name">.icon-icon_jiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_fasongfanwei"></span>
            <div class="name">
              icon_发送范围
            </div>
            <div class="code-name">.icon-icon_fasongfanwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_touxiang"></span>
            <div class="name">
              icon_头像
            </div>
            <div class="code-name">.icon-icon_touxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_jiantou2"></span>
            <div class="name">
              icon_箭头2
            </div>
            <div class="code-name">.icon-icon_jiantou2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fengxiantishi"></span>
            <div class="name">
              风险提示
            </div>
            <div class="code-name">.icon-fengxiantishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-boda1"></span>
            <div class="name">
              拨打
            </div>
            <div class="code-name">.icon-boda1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-genzongjilu1"></span>
            <div class="name">
              跟踪记录
            </div>
            <div class="code-name">.icon-genzongjilu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weiboda1"></span>
            <div class="name">
              未拨打
            </div>
            <div class="code-name">.icon-weiboda1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yitiangenzong1"></span>
            <div class="name">
              已填跟踪
            </div>
            <div class="code-name">.icon-yitiangenzong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fengxiantishi1"></span>
            <div class="name">
              风险提示
            </div>
            <div class="code-name">.icon-fengxiantishi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-genzongjilu"></span>
            <div class="name">
              跟踪记录
            </div>
            <div class="code-name">.icon-genzongjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yitiangenzong"></span>
            <div class="name">
              已填跟踪
            </div>
            <div class="code-name">.icon-yitiangenzong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-boda"></span>
            <div class="name">
              拨打
            </div>
            <div class="code-name">.icon-boda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weiboda"></span>
            <div class="name">
              未拨打
            </div>
            <div class="code-name">.icon-weiboda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaozhizuomoban_touxiang"></span>
            <div class="name">
              默认头像
            </div>
            <div class="code-name">.icon-tubiaozhizuomoban_touxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaozhizuomoban_imgmorentu"></span>
            <div class="name">
              img默认图
            </div>
            <div class="code-name">.icon-tubiaozhizuomoban_imgmorentu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaozhizuomoban_touxiang_zhixiangjiantou_1"></span>
            <div class="name">
              指向箭头_1
            </div>
            <div class="code-name">.icon-tubiaozhizuomoban_touxiang_zhixiangjiantou_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaozhizuomoban_touxiang_fasongfanwei"></span>
            <div class="name">
              发送范围
            </div>
            <div class="code-name">.icon-tubiaozhizuomoban_touxiang_fasongfanwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaozhizuomoban_touxiang_shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon-tubiaozhizuomoban_touxiang_shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaozhizuomoban_touxiang_huodongbiaoqian"></span>
            <div class="name">
              活动标签
            </div>
            <div class="code-name">.icon-tubiaozhizuomoban_touxiang_huodongbiaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaozhizuomoban_touxiang_bumenzuzhi"></span>
            <div class="name">
              部门组织
            </div>
            <div class="code-name">.icon-tubiaozhizuomoban_touxiang_bumenzuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaozhizuomoban_touxiang-09"></span>
            <div class="name">
              指向箭头_1
            </div>
            <div class="code-name">.icon-tubiaozhizuomoban_touxiang-09
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-circle"></span>
            <div class="name">
              circle
            </div>
            <div class="code-name">.icon-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianhua"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.icon-dianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huoyue"></span>
            <div class="name">
              活跃
            </div>
            <div class="code-name">.icon-huoyue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nan"></span>
            <div class="name">
              男
            </div>
            <div class="code-name">.icon-nan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lianxidianhua"></span>
            <div class="name">
              联系电话
            </div>
            <div class="code-name">.icon-lianxidianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nv"></span>
            <div class="name">
              女
            </div>
            <div class="code-name">.icon-nv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-he-zhihui"></span>
            <div class="name">
              合-置灰
            </div>
            <div class="code-name">.icon-he-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-saoyisao"></span>
            <div class="name">
              扫一扫
            </div>
            <div class="code-name">.icon-saoyisao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paiming"></span>
            <div class="name">
              排名
            </div>
            <div class="code-name">.icon-paiming
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanxiumian"></span>
            <div class="name">
              全休眠
            </div>
            <div class="code-name">.icon-quanxiumian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanglamoren"></span>
            <div class="name">
              上拉默认
            </div>
            <div class="code-name">.icon-shanglamoren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanglaxuanzhong"></span>
            <div class="name">
              上拉选中
            </div>
            <div class="code-name">.icon-shanglaxuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huoyuetishi"></span>
            <div class="name">
              活跃提示
            </div>
            <div class="code-name">.icon-huoyuetishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanxiumiantishi"></span>
            <div class="name">
              全休眠提示
            </div>
            <div class="code-name">.icon-quanxiumiantishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-remen"></span>
            <div class="name">
              热门
            </div>
            <div class="code-name">.icon-remen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo2"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouqi"></span>
            <div class="name">
              收起
            </div>
            <div class="code-name">.icon-shouqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xialamoren"></span>
            <div class="name">
              下拉默认
            </div>
            <div class="code-name">.icon-xialamoren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xialaxuanzhong"></span>
            <div class="name">
              下拉选中
            </div>
            <div class="code-name">.icon-xialaxuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wuxiaokehu"></span>
            <div class="name">
              无效客户
            </div>
            <div class="code-name">.icon-wuxiaokehu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhankai"></span>
            <div class="name">
              展开
            </div>
            <div class="code-name">.icon-zhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xingji-dianliang"></span>
            <div class="name">
              星级-点亮
            </div>
            <div class="code-name">.icon-xingji-dianliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wuxiaokehutishi"></span>
            <div class="name">
              无效客户提示
            </div>
            <div class="code-name">.icon-wuxiaokehutishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhu-zhihui"></span>
            <div class="name">
              注-置灰
            </div>
            <div class="code-name">.icon-zhu-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanjing"></span>
            <div class="name">
              眼睛
            </div>
            <div class="code-name">.icon-yanjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shi-zhihui"></span>
            <div class="name">
              实-置灰
            </div>
            <div class="code-name">.icon-shi-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xingji-zhihui"></span>
            <div class="name">
              星级-置灰
            </div>
            <div class="code-name">.icon-xingji-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gaoguanzhu"></span>
            <div class="name">
              高关注
            </div>
            <div class="code-name">.icon-gaoguanzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gaohuoyuetishi"></span>
            <div class="name">
              高活跃提示
            </div>
            <div class="code-name">.icon-gaohuoyuetishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feng-zhihui"></span>
            <div class="name">
              风-置灰
            </div>
            <div class="code-name">.icon-feng-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-fanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banxiumiantishi"></span>
            <div class="name">
              半休眠提示
            </div>
            <div class="code-name">.icon-banxiumiantishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banxiumian"></span>
            <div class="name">
              半休眠
            </div>
            <div class="code-name">.icon-banxiumian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixin"></span>
            <div class="name">
              weixin
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhiding"></span>
            <div class="name">
              置顶
            </div>
            <div class="code-name">.icon-zhiding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangla1"></span>
            <div class="name">
              上拉
            </div>
            <div class="code-name">.icon-shangla1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoyanjing"></span>
            <div class="name">
              小眼睛
            </div>
            <div class="code-name">.icon-xiaoyanjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-taoxin"></span>
            <div class="name">
              桃心
            </div>
            <div class="code-name">.icon-taoxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duihao"></span>
            <div class="name">
              对号
            </div>
            <div class="code-name">.icon-duihao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xin"></span>
            <div class="name">
              心
            </div>
            <div class="code-name">.icon-xin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erweima"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon-erweima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanfa"></span>
            <div class="name">
              转发
            </div>
            <div class="code-name">.icon-zhuanfa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youjiantoushixinxiao"></span>
            <div class="name">
              右箭头实心小
            </div>
            <div class="code-name">.icon-youjiantoushixinxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changyongicon-"></span>
            <div class="name">
              眼睛
            </div>
            <div class="code-name">.icon-changyongicon-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo1"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan19"></span>
            <div class="name">
              资源 38
            </div>
            <div class="code-name">.icon-ziyuan19
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan24"></span>
            <div class="name">
              资源 42
            </div>
            <div class="code-name">.icon-ziyuan24
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan25"></span>
            <div class="name">
              资源 41
            </div>
            <div class="code-name">.icon-ziyuan25
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan26"></span>
            <div class="name">
              资源 40
            </div>
            <div class="code-name">.icon-ziyuan26
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan27"></span>
            <div class="name">
              资源 37
            </div>
            <div class="code-name">.icon-ziyuan27
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan28"></span>
            <div class="name">
              资源 39
            </div>
            <div class="code-name">.icon-ziyuan28
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan29"></span>
            <div class="name">
              资源 36
            </div>
            <div class="code-name">.icon-ziyuan29
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add1-copy"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-add1-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan16"></span>
            <div class="name">
              资源 21
            </div>
            <div class="code-name">.icon-ziyuan16
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan17"></span>
            <div class="name">
              资源 29
            </div>
            <div class="code-name">.icon-ziyuan17
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan18"></span>
            <div class="name">
              资源 30
            </div>
            <div class="code-name">.icon-ziyuan18
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan21"></span>
            <div class="name">
              资源 28
            </div>
            <div class="code-name">.icon-ziyuan21
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan23"></span>
            <div class="name">
              资源 31
            </div>
            <div class="code-name">.icon-ziyuan23
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan14"></span>
            <div class="name">
              资源 1
            </div>
            <div class="code-name">.icon-ziyuan14
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan15"></span>
            <div class="name">
              资源 2
            </div>
            <div class="code-name">.icon-ziyuan15
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan13"></span>
            <div class="name">
              资源 20
            </div>
            <div class="code-name">.icon-ziyuan13
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan10"></span>
            <div class="name">
              资源 17
            </div>
            <div class="code-name">.icon-ziyuan10
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan11"></span>
            <div class="name">
              资源 19
            </div>
            <div class="code-name">.icon-ziyuan11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan12"></span>
            <div class="name">
              资源 18
            </div>
            <div class="code-name">.icon-ziyuan12
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan6"></span>
            <div class="name">
              资源 13
            </div>
            <div class="code-name">.icon-ziyuan6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan7"></span>
            <div class="name">
              资源 15
            </div>
            <div class="code-name">.icon-ziyuan7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan8"></span>
            <div class="name">
              资源 16
            </div>
            <div class="code-name">.icon-ziyuan8
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan9"></span>
            <div class="name">
              资源 12
            </div>
            <div class="code-name">.icon-ziyuan9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiala1"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.icon-xiala1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-buoumaotubiao53"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-buoumaotubiao53
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              跳转
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-beizhu"></span>
            <div class="name">
              备注
            </div>
            <div class="code-name">.icon-beizhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan5"></span>
            <div class="name">
              默认
            </div>
            <div class="code-name">.icon-ziyuan5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-logo"></span>
            <div class="name">
              logo
            </div>
            <div class="code-name">.icon-logo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhuidingbu"></span>
            <div class="name">
              返回顶部
            </div>
            <div class="code-name">.icon-fanhuidingbu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan3"></span>
            <div class="name">
              陪访
            </div>
            <div class="code-name">.icon-ziyuan3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan4"></span>
            <div class="name">
              活动
            </div>
            <div class="code-name">.icon-ziyuan4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiala"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.icon-xiala
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan"></span>
            <div class="name">
              公司
            </div>
            <div class="code-name">.icon-ziyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan1"></span>
            <div class="name">
              地址
            </div>
            <div class="code-name">.icon-ziyuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziyuan2"></span>
            <div class="name">
              电弧
            </div>
            <div class="code-name">.icon-ziyuan2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xingji"></span>
            <div class="name">
              17星级
            </div>
            <div class="code-name">.icon-xingji
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuan-weixuanzhong"></use>
                </svg>
                <div class="name">单选-未选中</div>
                <div class="code-name">#icon-danxuan-weixuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuan-xuanzhong"></use>
                </svg>
                <div class="name">单选-选中</div>
                <div class="code-name">#icon-danxuan-xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoxuan-weixuanzhong"></use>
                </svg>
                <div class="name">多选-未选中</div>
                <div class="code-name">#icon-duoxuan-weixuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoxuan-xuanzhong"></use>
                </svg>
                <div class="name">多选-选中</div>
                <div class="code-name">#icon-duoxuan-xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qingkong"></use>
                </svg>
                <div class="name">清空</div>
                <div class="code-name">#icon-qingkong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tishi"></use>
                </svg>
                <div class="name">提示</div>
                <div class="code-name">#icon-tishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-genggai"></use>
                </svg>
                <div class="name">更改</div>
                <div class="code-name">#icon-genggai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhi-lan"></use>
                </svg>
                <div class="name">复制-蓝</div>
                <div class="code-name">#icon-fuzhi-lan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhi-hui"></use>
                </svg>
                <div class="name">复制-灰</div>
                <div class="code-name">#icon-fuzhi-hui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daohang_fanhuijiantou1x"></use>
                </svg>
                <div class="name">导航_返回箭头@1x</div>
                <div class="code-name">#icon-daohang_fanhuijiantou1x</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_zuzhi1"></use>
                </svg>
                <div class="name">icon_组织</div>
                <div class="code-name">#icon-icon_zuzhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duoxuan"></use>
                </svg>
                <div class="name">多选</div>
                <div class="code-name">#icon-duoxuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanze"></use>
                </svg>
                <div class="name">选择－</div>
                <div class="code-name">#icon-xuanze</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_biaoqian"></use>
                </svg>
                <div class="name">icon_标签</div>
                <div class="code-name">#icon-icon_biaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_shizhong"></use>
                </svg>
                <div class="name">icon_时钟</div>
                <div class="code-name">#icon-icon_shizhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_morentu"></use>
                </svg>
                <div class="name">icon_默认图</div>
                <div class="code-name">#icon-icon_morentu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_jiantou"></use>
                </svg>
                <div class="name">icon_箭头</div>
                <div class="code-name">#icon-icon_jiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_fasongfanwei"></use>
                </svg>
                <div class="name">icon_发送范围</div>
                <div class="code-name">#icon-icon_fasongfanwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_touxiang"></use>
                </svg>
                <div class="name">icon_头像</div>
                <div class="code-name">#icon-icon_touxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_jiantou2"></use>
                </svg>
                <div class="name">icon_箭头2</div>
                <div class="code-name">#icon-icon_jiantou2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fengxiantishi"></use>
                </svg>
                <div class="name">风险提示</div>
                <div class="code-name">#icon-fengxiantishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-boda1"></use>
                </svg>
                <div class="name">拨打</div>
                <div class="code-name">#icon-boda1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-genzongjilu1"></use>
                </svg>
                <div class="name">跟踪记录</div>
                <div class="code-name">#icon-genzongjilu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weiboda1"></use>
                </svg>
                <div class="name">未拨打</div>
                <div class="code-name">#icon-weiboda1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yitiangenzong1"></use>
                </svg>
                <div class="name">已填跟踪</div>
                <div class="code-name">#icon-yitiangenzong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fengxiantishi1"></use>
                </svg>
                <div class="name">风险提示</div>
                <div class="code-name">#icon-fengxiantishi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-genzongjilu"></use>
                </svg>
                <div class="name">跟踪记录</div>
                <div class="code-name">#icon-genzongjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yitiangenzong"></use>
                </svg>
                <div class="name">已填跟踪</div>
                <div class="code-name">#icon-yitiangenzong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-boda"></use>
                </svg>
                <div class="name">拨打</div>
                <div class="code-name">#icon-boda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weiboda"></use>
                </svg>
                <div class="name">未拨打</div>
                <div class="code-name">#icon-weiboda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaozhizuomoban_touxiang"></use>
                </svg>
                <div class="name">默认头像</div>
                <div class="code-name">#icon-tubiaozhizuomoban_touxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaozhizuomoban_imgmorentu"></use>
                </svg>
                <div class="name">img默认图</div>
                <div class="code-name">#icon-tubiaozhizuomoban_imgmorentu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaozhizuomoban_touxiang_zhixiangjiantou_1"></use>
                </svg>
                <div class="name">指向箭头_1</div>
                <div class="code-name">#icon-tubiaozhizuomoban_touxiang_zhixiangjiantou_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaozhizuomoban_touxiang_fasongfanwei"></use>
                </svg>
                <div class="name">发送范围</div>
                <div class="code-name">#icon-tubiaozhizuomoban_touxiang_fasongfanwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaozhizuomoban_touxiang_shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon-tubiaozhizuomoban_touxiang_shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaozhizuomoban_touxiang_huodongbiaoqian"></use>
                </svg>
                <div class="name">活动标签</div>
                <div class="code-name">#icon-tubiaozhizuomoban_touxiang_huodongbiaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaozhizuomoban_touxiang_bumenzuzhi"></use>
                </svg>
                <div class="name">部门组织</div>
                <div class="code-name">#icon-tubiaozhizuomoban_touxiang_bumenzuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaozhizuomoban_touxiang-09"></use>
                </svg>
                <div class="name">指向箭头_1</div>
                <div class="code-name">#icon-tubiaozhizuomoban_touxiang-09</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-circle"></use>
                </svg>
                <div class="name">circle</div>
                <div class="code-name">#icon-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianhua"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#icon-dianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huoyue"></use>
                </svg>
                <div class="name">活跃</div>
                <div class="code-name">#icon-huoyue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nan"></use>
                </svg>
                <div class="name">男</div>
                <div class="code-name">#icon-nan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lianxidianhua"></use>
                </svg>
                <div class="name">联系电话</div>
                <div class="code-name">#icon-lianxidianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nv"></use>
                </svg>
                <div class="name">女</div>
                <div class="code-name">#icon-nv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-he-zhihui"></use>
                </svg>
                <div class="name">合-置灰</div>
                <div class="code-name">#icon-he-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saoyisao"></use>
                </svg>
                <div class="name">扫一扫</div>
                <div class="code-name">#icon-saoyisao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paiming"></use>
                </svg>
                <div class="name">排名</div>
                <div class="code-name">#icon-paiming</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanxiumian"></use>
                </svg>
                <div class="name">全休眠</div>
                <div class="code-name">#icon-quanxiumian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanglamoren"></use>
                </svg>
                <div class="name">上拉默认</div>
                <div class="code-name">#icon-shanglamoren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanglaxuanzhong"></use>
                </svg>
                <div class="name">上拉选中</div>
                <div class="code-name">#icon-shanglaxuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huoyuetishi"></use>
                </svg>
                <div class="name">活跃提示</div>
                <div class="code-name">#icon-huoyuetishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanxiumiantishi"></use>
                </svg>
                <div class="name">全休眠提示</div>
                <div class="code-name">#icon-quanxiumiantishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-remen"></use>
                </svg>
                <div class="name">热门</div>
                <div class="code-name">#icon-remen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo2"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouqi"></use>
                </svg>
                <div class="name">收起</div>
                <div class="code-name">#icon-shouqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xialamoren"></use>
                </svg>
                <div class="name">下拉默认</div>
                <div class="code-name">#icon-xialamoren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xialaxuanzhong"></use>
                </svg>
                <div class="name">下拉选中</div>
                <div class="code-name">#icon-xialaxuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wuxiaokehu"></use>
                </svg>
                <div class="name">无效客户</div>
                <div class="code-name">#icon-wuxiaokehu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhankai"></use>
                </svg>
                <div class="name">展开</div>
                <div class="code-name">#icon-zhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingji-dianliang"></use>
                </svg>
                <div class="name">星级-点亮</div>
                <div class="code-name">#icon-xingji-dianliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wuxiaokehutishi"></use>
                </svg>
                <div class="name">无效客户提示</div>
                <div class="code-name">#icon-wuxiaokehutishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhu-zhihui"></use>
                </svg>
                <div class="name">注-置灰</div>
                <div class="code-name">#icon-zhu-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanjing"></use>
                </svg>
                <div class="name">眼睛</div>
                <div class="code-name">#icon-yanjing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shi-zhihui"></use>
                </svg>
                <div class="name">实-置灰</div>
                <div class="code-name">#icon-shi-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingji-zhihui"></use>
                </svg>
                <div class="name">星级-置灰</div>
                <div class="code-name">#icon-xingji-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaoguanzhu"></use>
                </svg>
                <div class="name">高关注</div>
                <div class="code-name">#icon-gaoguanzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaohuoyuetishi"></use>
                </svg>
                <div class="name">高活跃提示</div>
                <div class="code-name">#icon-gaohuoyuetishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feng-zhihui"></use>
                </svg>
                <div class="name">风-置灰</div>
                <div class="code-name">#icon-feng-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-fanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banxiumiantishi"></use>
                </svg>
                <div class="name">半休眠提示</div>
                <div class="code-name">#icon-banxiumiantishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banxiumian"></use>
                </svg>
                <div class="name">半休眠</div>
                <div class="code-name">#icon-banxiumian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">weixin</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhiding"></use>
                </svg>
                <div class="name">置顶</div>
                <div class="code-name">#icon-zhiding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangla1"></use>
                </svg>
                <div class="name">上拉</div>
                <div class="code-name">#icon-shangla1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoyanjing"></use>
                </svg>
                <div class="name">小眼睛</div>
                <div class="code-name">#icon-xiaoyanjing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-taoxin"></use>
                </svg>
                <div class="name">桃心</div>
                <div class="code-name">#icon-taoxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duihao"></use>
                </svg>
                <div class="name">对号</div>
                <div class="code-name">#icon-duihao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xin"></use>
                </svg>
                <div class="name">心</div>
                <div class="code-name">#icon-xin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erweima"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon-erweima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanfa"></use>
                </svg>
                <div class="name">转发</div>
                <div class="code-name">#icon-zhuanfa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantoushixinxiao"></use>
                </svg>
                <div class="name">右箭头实心小</div>
                <div class="code-name">#icon-youjiantoushixinxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changyongicon-"></use>
                </svg>
                <div class="name">眼睛</div>
                <div class="code-name">#icon-changyongicon-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo1"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan19"></use>
                </svg>
                <div class="name">资源 38</div>
                <div class="code-name">#icon-ziyuan19</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan24"></use>
                </svg>
                <div class="name">资源 42</div>
                <div class="code-name">#icon-ziyuan24</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan25"></use>
                </svg>
                <div class="name">资源 41</div>
                <div class="code-name">#icon-ziyuan25</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan26"></use>
                </svg>
                <div class="name">资源 40</div>
                <div class="code-name">#icon-ziyuan26</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan27"></use>
                </svg>
                <div class="name">资源 37</div>
                <div class="code-name">#icon-ziyuan27</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan28"></use>
                </svg>
                <div class="name">资源 39</div>
                <div class="code-name">#icon-ziyuan28</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan29"></use>
                </svg>
                <div class="name">资源 36</div>
                <div class="code-name">#icon-ziyuan29</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add1-copy"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-add1-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan16"></use>
                </svg>
                <div class="name">资源 21</div>
                <div class="code-name">#icon-ziyuan16</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan17"></use>
                </svg>
                <div class="name">资源 29</div>
                <div class="code-name">#icon-ziyuan17</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan18"></use>
                </svg>
                <div class="name">资源 30</div>
                <div class="code-name">#icon-ziyuan18</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan21"></use>
                </svg>
                <div class="name">资源 28</div>
                <div class="code-name">#icon-ziyuan21</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan23"></use>
                </svg>
                <div class="name">资源 31</div>
                <div class="code-name">#icon-ziyuan23</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan14"></use>
                </svg>
                <div class="name">资源 1</div>
                <div class="code-name">#icon-ziyuan14</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan15"></use>
                </svg>
                <div class="name">资源 2</div>
                <div class="code-name">#icon-ziyuan15</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan13"></use>
                </svg>
                <div class="name">资源 20</div>
                <div class="code-name">#icon-ziyuan13</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan10"></use>
                </svg>
                <div class="name">资源 17</div>
                <div class="code-name">#icon-ziyuan10</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan11"></use>
                </svg>
                <div class="name">资源 19</div>
                <div class="code-name">#icon-ziyuan11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan12"></use>
                </svg>
                <div class="name">资源 18</div>
                <div class="code-name">#icon-ziyuan12</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan6"></use>
                </svg>
                <div class="name">资源 13</div>
                <div class="code-name">#icon-ziyuan6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan7"></use>
                </svg>
                <div class="name">资源 15</div>
                <div class="code-name">#icon-ziyuan7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan8"></use>
                </svg>
                <div class="name">资源 16</div>
                <div class="code-name">#icon-ziyuan8</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan9"></use>
                </svg>
                <div class="name">资源 12</div>
                <div class="code-name">#icon-ziyuan9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiala1"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#icon-xiala1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-buoumaotubiao53"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-buoumaotubiao53</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">跳转</div>
                <div class="code-name">#icon-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-beizhu"></use>
                </svg>
                <div class="name">备注</div>
                <div class="code-name">#icon-beizhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan5"></use>
                </svg>
                <div class="name">默认</div>
                <div class="code-name">#icon-ziyuan5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logo"></use>
                </svg>
                <div class="name">logo</div>
                <div class="code-name">#icon-logo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhuidingbu"></use>
                </svg>
                <div class="name">返回顶部</div>
                <div class="code-name">#icon-fanhuidingbu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan3"></use>
                </svg>
                <div class="name">陪访</div>
                <div class="code-name">#icon-ziyuan3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan4"></use>
                </svg>
                <div class="name">活动</div>
                <div class="code-name">#icon-ziyuan4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiala"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#icon-xiala</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan"></use>
                </svg>
                <div class="name">公司</div>
                <div class="code-name">#icon-ziyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan1"></use>
                </svg>
                <div class="name">地址</div>
                <div class="code-name">#icon-ziyuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan2"></use>
                </svg>
                <div class="name">电弧</div>
                <div class="code-name">#icon-ziyuan2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingji"></use>
                </svg>
                <div class="name">17星级</div>
                <div class="code-name">#icon-xingji</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
